<template>
  <div id="myPage">
    <hd titles="我的"></hd>
    <div class="main">
      <div class="personHead">
        <div class="headimg" @click="toMyInfo">
          <van-icon name="https://tse1-mm.cn.bing.net/th/id/OIP.aUA3G59Wo7yysHu8R6np5AHaI6?w=192&h=232&c=7&o=5&pid=1.7" :badge='level' class="headimg-icon"/>
        </div>
        <div class="headtext">
          <span class="nickName">{{nickName}}</span>
          <span class="gradeInfo">升级至{{level}}还需{{points}}积分</span>
        </div>
        <div class="settingicon" @click="toMyInfo">
          <van-icon name="setting-o" color="white" size="30px" />
        </div>
      </div>
      <div class="myWallet">
        <van-row type="flex" justify="space-around">
          <!--        余额-->
          <van-col span="6" class="balance">
            <div class="walletIcon">
              <van-icon name="balance-pay" size="40px"/>
            </div>
            <div class="walletInfo">
              {{myBlance}}
            </div>
          </van-col>
          <!--        优惠券-->
          <van-col span="6" class="coupon">
            <div class="walletIcon">
              <van-icon name="coupon-o" size="40px"/>
            </div>
            <div class="walletInfo">
              {{myCoupon}}
            </div>
          </van-col>
          <!--        可用积分-->
          <van-col span="6" class="myGrade">
            <div class="walletIcon">
              <van-icon name="points" size="40px"/>
            </div>
            <div class="walletInfo">
              {{mypoints}}
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="myOrders">
        <div class="myOrdersHead" @click="toOrder">
        <span class="headleft">
          我的订单
        </span>
          <span class="headright">
          查看全部订单<van-icon name="arrow" size="14px" class="i"/>
        </span>
        </div>
        <div class="myordersDetalis">
          <van-row>
            <van-col span="4" class="orderIcons">
              <div class="orederIcon">
                <van-icon name="gold-coin-o" :badge="waitPay" size="30px"/>
              </div>
              <div class="orderMoudle">
                代付款
              </div>
            </van-col>
            <van-col span="4" class="orderIcons">
              <div class="orederIcon">
                <van-icon name="friends-o" :badge="waitConbin" size="30px"/>
              </div>
              <div class="orderMoudle">
                待成团
              </div>
            </van-col>
            <van-col span="4" class="orderIcons">
              <div class="orederIcon">
                <van-icon name="passed" :badge="waitCheck" size="30px"/>
              </div>
              <div class="orderMoudle">
                待核销
              </div>
            </van-col>
            <van-col span="4" class="orderIcons">
              <div class="orederIcon">
                <van-icon name="gift-o" :badge="waitSend" size="30px"/>
              </div>
              <div class="orderMoudle">
                待发货
              </div>
            </van-col>
            <van-col span="4" class="orderIcons">
              <div class="orederIcon">
                <van-icon name="clock-o" :badge="waitGet" size="30px"/>
              </div>
              <div class="orderMoudle">
                待收货
              </div>
            </van-col>
            <van-col span="4" class="orderIcons">
              <div class="orederIcon">
                <van-icon name="comment-circle-o" :badge="waitComment" size="30px"/>
              </div>
              <div class="orderMoudle">
                待评价
              </div>
            </van-col>
          </van-row>

        </div>
      </div>
      <div class="toolBox">
        <van-row type="flex" justify="center">
          <van-col span="6" class="box" @click="toMyGroup">
            <div class="theIcon">
              <van-icon name="friends-o" size="40px"/>
            </div>
            <div class="thetext">我的拼团</div>
          </van-col>
          <van-col span="6" class="box">
            <div class="theIcon">
              <van-icon name="gift-o" size="40px"/>
            </div>
            <div class="thetext">我的抽奖</div>
          </van-col>
          <van-col span="6" class="box" @click="toCoupon">
            <div class="theIcon">
              <van-icon name="coupon-o" size="40px"/>
            </div>
            <div class="thetext">我的优惠券</div>
          </van-col>
          <van-col span="6" class="box" @click="toCollect">
            <div class="theIcon">
              <van-icon name="like-o" size="40px"/>
            </div>
            <div class="thetext">我的收藏</div>
          </van-col>
          <van-col span="6" class="box">
            <div class="theIcon">
              <van-icon name="location-o" size="40px"/>
            </div>
            <div class="thetext">收货地址</div>
          </van-col>
          <van-col span="6" class="box" @click="toIntegral">
            <div class="theIcon">
              <van-icon name="bag-o" size="40px"/>
            </div>
            <div class="thetext">积分商城</div>
          </van-col>
          <van-col span="6" class="box">
            <div class="theIcon">
              <van-icon name="comment-circle-o" size="40px"/>
            </div>
            <div class="thetext">我的评论</div>
          </van-col>
          <van-col span="6" class="box">
            <router-link to="/questionPage" tag="div">
              <div class="theIcon">
                <van-icon name="question-o" size="40px"/>
              </div>
              <div class="thetext">常见问题</div>
            </router-link>
          </van-col>
        </van-row>
      </div>
    </div>
    <ftr></ftr>
  </div>
</template>

<script>
    export default {
        name: "myPage",
      data(){
          return {
            nickName:'JasonWinchester',
            level:2,
            points:999,
            myBlance:'885.00',
            myCoupon:'4',
            mypoints:90,
            waitPay:22,
            waitConbin:22,
            waitCheck:33,
            waitSend:55,
            waitGet:66,
            waitComment:88
          }
      },
      components : {
        hd : () =>import('@/components/public/hd'),
        ftr:()=>import('@/components/public/ftr')
      },
      methods:{
        toOrder(){
          this.$router.push({name:'orderCenter'});
        },
        toMyInfo(){
          this.$router.push({name:'myinfo'});
        },
        toIntegral(){
          this.$router.push({name:'integral'})
        },
        toCollect(){
          this.$router.push({name:'Collection'})
        },
        toMyGroup(){
          this.$router.push({name:'MyGroup'})
        },
        toCoupon(){
          this.$router.push({name:'Coupon'})
        },
      },
    }
</script>

<style scoped>
  #myPage{
    background-color: silver;
  }
  .personHead{
    width: 100%;
    height: 100px;
    background-color: cadetblue;
  }
  .headimg{
    height: 80px;
    width: 80px;
    background-color: pink;
    float: left;
    /*margin-top: 10px;*/
    /*margin-left: 20px;*/
    /*margin-right: 20px;*/
    margin: 10px 20px 0 20px;
    border-radius: 50%;
  }
  .headimg img{
    height: 80px;
    width: 80px;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
  }



  .headtext{
    float: left;
    width: calc(100% - 170px);
    height: 80px;
    /*background-color: pink;*/
    margin-top: 10px;
  }
  .nickName,.gradeInfo{
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-weight: 300;
    display: table;
    color: white;
  }


  .settingicon{
    width: 30px;
    height: 30px;
    /*background-color: black;*/
    float: right;
    margin: 10px 10px 0 0 ;
  }



  .myWallet{
    width: 100%;
    height: 70px;
    margin-bottom: 10px;
    background-color: white;
  }
  .balance,
  .coupon,
  .myGrade{
    height: 60px;
  }
  .walletIcon{
    width:40px;
    height: 40px;
    /*background-color: black;*/
    margin: 5px auto 0;
  }
  .walletInfo{
    width: 80px;
    height: 20px;
    /*background-color: cadetblue;*/
    color: gray;
    margin: 0 auto;
    text-align: center;
  }
  .myOrders{
    width: 100%;
    height: 100px;
    background-color: white;
  }
  .myOrdersHead{
    width: 100%;
    height: 40px;
    background-color: white;
    line-height: 40px;
    overflow: hidden;
  }
  .headright{
    font-weight: 300;
    font-size: 14px;
    float: right;
    margin-right: 5px;
    color: grey;
  }
  .headleft{
    font-weight: 300;
    margin-left: 10px;
    float: left;
  }
  .headright .i{
    width: 14px;
    height: 14px;
    margin-top: 12px;
  }

  .orderIcons{
    /*background-color: pink;*/
    height: 60px;
  }
  .orederIcon{
    width: 30px;
    height: 30px;
    /*background-color: #3db5b8;*/
    margin: 10px auto 0;
  }
  .orderMoudle{
    width: 40px;
    height: 20px;
    /*background-color: white;*/
    font-size: 12px;
    color: #3b3a3a;
    margin: 0 auto;
  }
  .toolBox{
    margin-top: 10px;
    border-top: 1px silver solid;
    background-color: white;
  }
  .box{
    /*background-color: #42b983;*/
    height: 80px;
    border-right: 1px solid silver;
    border-bottom: 1px solid silver;
  }
  .box:nth-child(4n){
    border-right: none;
  }
  .theIcon{
    width: 40px;
    height: 40px;
    margin: 10px auto 0;
  }
  .thetext{
    width: 60px;
    height: 20px;
    font-size: 12px;
    font-weight: 300;
    margin: 0 auto;
    text-align: center;
  }
</style>
